<template>
  <div class="profile">
    <!-- 头部信息 -->
    <div class="user-info" @click="$router.push('/edit-profile')">

      <!-- 头像 -->
      <div class="avatar">
        <img :src="headImg" alt="">
      </div>
      <!-- 信息 -->
      <div class="info">
        <p class="name">
          <!-- <i class="iconfont iconxingbienan"></i>
          <span>火星网友</span> -->
          <i v-if="profile.gender ===1" class="iconfont iconxingbienan"></i>
          <i v-else class="iconfont iconxingbienv"></i>
          <span>{{ profile.nickname }}</span>
        </p>
        <p class="time">{{ profile.create_date | time }}</p>
      </div>
      <!-- 右箭头 -->
      <div class="icon">
        <i class="iconfont iconjiantou1"></i>
      </div>
    </div>
    <!-- 下面列表 -->
    <div class="list">
      <hm-nav name="我的关注" info="关注的用户" @click="$router.push('/follow')"></hm-nav>
      <hm-nav name="我的跟帖" info="跟帖 / 回复" @click="$router.push('/my-comments')"></hm-nav>
      <hm-nav name="我的收藏" info="文章 / 视频" @click="$router.push('/my-favorite')"></hm-nav>
      <hm-nav name="设置" @click="$router.push('/edit-profile')"></hm-nav>
    </div>
    <div class="logout-btn">
        <van-button @click="logout" type="info" size="large" round>退出</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      profile: {
      }
    }
  },
  computed: {
    headImg () {
      return this.$axios.defaults.baseURL + this.profile.head_img
    }
  },
  async created () {
    const userId = localStorage.getItem('user_id')
    const token = localStorage.getItem('token')
    const res = await this.$axios.get(`/user/${userId}`, {
      headers: {
        Authorization: token
      }
    })
    const { statusCode, data } = res.data
    if (statusCode === 200) {
      this.profile = data
    }
  },
  methods: {
    // fn () {
    //   console.log(11111)
    // }
    async logout () {
      try {
        await this.$dialog.confirm({
          title: '温馨提示',
          message: '亲! 你确认要退出么?'
        })
        localStorage.removeItem('token')
        localStorage.removeItem('user_id')
        this.$router.push('/login')
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.profile {
  .user-info {
    display: flex;
    padding: 20px;
    border-bottom: 3px solid #ccc;
    .avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
    }
    .info {
      flex: 1;
      padding: 10px;
      p {
        height: 25px;
        left: 25px;
      }
      .name {
        font-size: 16px;
        color: #000;
        i {
          color: #7bbcec;
          margin-right: 5px;
        }
      }
      .time {
        font-size: 14px;
        color: #999;
      }
    }
    .icon {
      width: 30px;
      height: 70px;
      line-height: 70px;
      text-align: center;
    }
  }
  .logout-btn {
      padding: 20px;
  }
}
</style>
